@import '../styles/easing';
@import '../styles/color';
@import '../styles/shadow';
@import '../styles/center';
@import '../styles/layer';

.modal {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity $ease-in-out-quart;
  z-index: $layer-modal;

  &.showing {
    opacity: 1;
  }

  .card {
    background-color: $color-white;
    box-shadow: $shadow-modal;
    position: fixed;
    @include align-center;
  }

  .mask {
    background-color: color-transparent-black(0.2);
    height: 100%;
    width: 100%;
  }
}
